<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.btn {
	width: 100%;
	height: 100px;
	border: 0;
	outline: 0;
	-webkit-appearance: none;
	margin-bottom: 15px;
	font-size: 18px;
	text-align: center;
}

.btn_primary {
	background-color: #04be02;
}
</style>

</head>
<body>
	<h1>Welcome To SpringMVC!</h1>

	<h3 id="menu-image">图像接口</h3>
	<span class="desc">拍照或从手机相册中选图接口</span>
	<button class="btn btn_primary" id="chooseImage">chooseImage</button>
	<span class="desc">预览图片接口</span>
	<button class="btn btn_primary" id="previewImage">previewImage</button>
	<span class="desc">上传图片接口</span>
	<button class="btn btn_primary" id="uploadImage">uploadImage</button>
	<span class="desc">下载图片接口</span>
	<button class="btn btn_primary" id="downloadImage">downloadImage</button>
<div id="htm"></div>
<img src="" class="img">

	<script type="text/javascript">
		define = null;
		require = null;
	</script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script>
		wx.config({
			debug : false,
			appId : '${appId}',
			timestamp : '${timestamp}',
			nonceStr : '${nonceStr}',
			signature : '${signature}',
			jsApiList : [ 'chooseImage', 'previewImage', 'uploadImage',
					'downloadImage' ]
		});
	</script>
	<!--自定义js-->
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"
		type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath }/js/jquery.form.min.js"
		type="text/javascript" charset="utf-8"></script>
	<%-- <script src="${pageContext.request.contextPath}/js/oper.js" type="text/javascript" charset="utf-8"></script> --%>
</body>
</html>
<script>

		// 5 图片接口
		// 5.1 拍照、本地选图
		var images = {
			localId : [],
			serverId : []
		};
		document.querySelector('#chooseImage').onclick = function() {
			wx.chooseImage({
				count: 3, // 可选图片张数，默认9 
			  	sizeType: ['compressed'], // original', 'compressed'可以指定是原图还是压缩图，默认二者都有  
	            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
				success : function(res) {
					images.localId = res.localIds;
					$(".img").attr("src",images.localId);
				}
			});
		};

		// 5.2 图片预览
		document.querySelector('#previewImage').onclick = function() {
			wx.previewImage({
				current : 'http://img1.utuku.china.com/uploadimg/toutiao/20180414/c6a2aee5-bbb8-4164-8df7-5a25ff969e2c.gif',
				urls : [
						'http://img1.utuku.china.com/uploadimg/toutiao/20180414/c6a2aee5-bbb8-4164-8df7-5a25ff969e2c.gif',
						'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
						'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg' ]
			});
		};

		// 5.3 上传图片
		document.querySelector('#uploadImage').onclick = function() {
			if (images.localId.length == 0) {
				alert('请先使用 chooseImage 接口选择图片');
				return;
			}
			var i = 0, length = images.localId.length;
			images.serverId = [];
			function upload() {
				wx.uploadImage({
					localId : images.localId[i],
					success : function(res) {
						i++;
						//alert('已上传：' + i + '/' + length);
						images.serverId.push(res.serverId);
						if (i < length) {
							upload();
						}
					},
					fail : function(res) {
						alert(JSON.stringify(res));
					}
				});
			}
			upload();
		};

		// 5.4 下载图片
		document.querySelector('#downloadImage').onclick = function() {
			if (images.serverId.length === 0) {
				alert('请先使用 uploadImage 上传图片');
				return;
			}
			var i = 0, length = images.serverId.length;
			images.localId = [];
			function download() {
				wx.downloadImage({
					serverId : images.serverId[i],
					success : function(res) {
						i++;
						alert('已下载：' + i + '/' + length);
						images.localId.push(res.localId);
						if (i < length) {
							download();
						}
					}
				});
			}
			download();
		};

</script>